import 'package:flutter/material.dart';

// 🎯 案例 5：高级视差+缩放组合效果
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: AdvancedParallaxPageView(),
    );
  }
}

class AdvancedParallaxPageView extends StatefulWidget {
  @override
  _AdvancedParallaxPageViewState createState() =>
      _AdvancedParallaxPageViewState();
}

class _AdvancedParallaxPageViewState extends State<AdvancedParallaxPageView> {
  final PageController _pageController = PageController(viewportFraction: 0.9);
  double _currentPage = 0.0;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      setState(() {
        _currentPage = _pageController.page!;
      });
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      appBar: AppBar(title: Text('高级视差+缩放效果'), backgroundColor: Colors.black),
      body: PageView.builder(
        controller: _pageController,
        itemCount: 5,
        itemBuilder: (context, index) {
          final double relativePosition = index - _currentPage;
          final double absPosition = relativePosition.abs();

          // 多重视差效果参数
          final double backgroundOffset = relativePosition * 150;
          final double middleLayerOffset = relativePosition * 80;
          final double foregroundOffset = relativePosition * 30;

          // 缩放效果
          final double scale = 1.0 - (absPosition * 0.1);

          // 旋转效果
          final double rotation = relativePosition * 0.05;

          return AnimatedBuilder(
            animation: _pageController,
            builder: (context, child) {
              return Transform(
                alignment: Alignment.center,
                transform: Matrix4.identity()
                  ..setEntry(3, 2, 0.001)
                  ..rotateY(rotation),
                child: Transform.scale(
                  scale: scale,
                  child: Container(
                    margin: EdgeInsets.symmetric(vertical: 40, horizontal: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(24),
                      color: Colors.black,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.blueAccent.withOpacity(0.3),
                          blurRadius: 20,
                          spreadRadius: 2,
                        ),
                      ],
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(24),
                      child: Stack(
                        fit: StackFit.expand,
                        children: [
                          // 背景层 - 移动最慢
                          Positioned(
                            left: -backgroundOffset,
                            right: backgroundOffset,
                            child: Container(
                              height: double.infinity,
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                    Colors.blue[900]!,
                                    Colors.purple[900]!,
                                  ],
                                ),
                              ),
                            ),
                          ),

                          // 中间层 - 中等移动速度
                          Positioned(
                            left: -middleLayerOffset * 0.5,
                            right: middleLayerOffset * 0.5,
                            bottom: 50,
                            child: Transform.rotate(
                              angle: rotation * 2,
                              child: Container(
                                width: 200,
                                height: 200,
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.white.withOpacity(0.1),
                                ),
                              ),
                            ),
                          ),

                          // 前景内容 - 移动最快
                          Transform.translate(
                            offset: Offset(foregroundOffset, 0),
                            child: Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Transform.rotate(
                                    angle: -rotation * 3,
                                    child: Icon(
                                      Icons.rocket_launch,
                                      size: 80,
                                      color: Colors.white,
                                    ),
                                  ),
                                  SizedBox(height: 20),
                                  Text(
                                    '高级效果 ${index + 1}',
                                    style: TextStyle(
                                      fontSize: 28,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white,
                                    ),
                                  ),
                                  SizedBox(height: 10),
                                  Text(
                                    '视差 + 缩放 + 旋转',
                                    style: TextStyle(
                                      color: Colors.white70,
                                      fontSize: 16,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
